<template>
  <div class="contain">
    <div class="peosonal">
      <div class="head">
        <img src="../assets/menv.png" alt="">
        <img src="../assets/share.png" alt="">
      </div>
      <div class="instroduce">
        <div class="avatar">
          <img src="https://t7.baidu.com/it/u=128764686,1887614532&fm=193&f=GIF" alt="">
        </div>

        <div class="add">+</div>

        <div class="name-number">
          <div class="name">一川</div>
          <div class="number">小红书号：1808972297</div>
        </div>
      </div>
      <div class="message">
        <div class="leftContent">
          <div class="data top">
            <p>0</p>
            <p>0</p>
            <p>0</p>

          </div>
          
          <div class="data">
            <p>关注</p>
            <p>粉丝</p>
            <p>获赞与收藏</p>
          </div>
          
        </div>
        <div class="rightContent">编辑资料</div>
      </div>
    </div>

    <div class="push">
      <van-tabs class="navBar">
        <van-tab title="笔记"></van-tab>
        <van-tab title="收藏"></van-tab>
        <van-tab title="赞过"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.contain{
  width: 100%;
  background: linear-gradient(to bottom right, rgb(28, 28, 44), rgb(68, 69, 87));

}
.peosonal{
  width: 100%;
  height: 240px;
  padding: 10px 10px 0px 10px;
  box-sizing: border-box;
}
.head{
  display: flex;
  justify-content: space-between;
}
.head img{
  width: 25px;
  height: 25px;
}
.instroduce{
  width: 100%;
  height: 100px;
  margin-top: 20px;
  display: flex;
}
.instroduce img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.add{
  background-color: yellow;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 30px;
  border-radius: 50%;
  border: 2px solid rgb(255, 255, 255);
  text-align: center;
  position: absolute;
  top: 127px;
  left: 77px;
}
.name-number{
  margin-top: 30px;
  margin-left: 15px;
  color: #fff;
}
.name{
  font-size: 20px;
}
.number{
  margin-top: 20px;
  font-size: 12px;
}
.message{
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.leftContent{
  width: 60%;
  height: 40px;
  text-align: center;
  color: rgb(223, 223, 223);
  font-size: 13px;
}
.data{
  height: 20px;
  display: flex;
  justify-content: space-around;
}
.data.top{
  width: 78%;
}
.data p{
  height: 20px;
  line-height: 20px;
}
.rightContent{
  border: 1px solid #fff;
  width: 82px;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.push{
  width: 100%;
  height: 100px;
  background-color: rgb(255, 255, 255);
  border-top-left-radius: 10px 10px;
  border-top-right-radius: 10px 10px;
  
}
.navBar{
  width: 50%;
  transform: translateX(50%);
}
</style>